<template>
  <div class="followBox">
   <van-row class="van_header_1"></van-row>
    <van-row class="van_header">
      <van-col span="4" class="van_jia">
        <van-icon name="add-o" @click="tianjia" />
      </van-col>
      <van-col span="20">
        <van-row span="24">
          <van-tabs v-model="activeName">
            <van-tab title="关注" to="follow" name="follow"></van-tab>
            <van-tab title="发现" name="found" to="found"></van-tab>
            <van-tab title="深圳" to="shenzhen" name="shenzhen"></van-tab>
          </van-tabs>
        </van-row>
      </van-col>
    </van-row>

    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <!-- 主题内容 -->

    <van-row type="flex" v-for="(item,index) in tableData" :key='index'>
      <van-col span="1"></van-col>
      <van-col span="22">
        <div class="main">
          <div class="main_first" >
            <div class="active">{{item.active}}</div>
            <router-link to="activity">

            <img :src="item.src" alt="" />
            </router-link>
            <div class="word">
              <p>{{item.title}}</p>
            </div>
          </div>
        </div>
      </van-col>
      <van-col span="1"></van-col>
    </van-row>
    <Footer></Footer>
   
  </div>
</template>

<script>
import Footer from "../../components/Footer/footer.vue"

export default {
  data() {
    return {
      activeName: "follow",
      value: "",
      flag: false,
      tableData:[
        {
          src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.33cy.cn%2Fuploads%2Fallimg%2F211110%2F1-211110112443T2.jpg&refer=http%3A%2F%2Fwww.33cy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814145&t=49cf67903407264bf0f6158b479c8741',
          title:'深圳福田志愿者分队微服私访《美国至尊披萨》',
          active:'体察活动'
        },
        {
          src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.33cy.cn%2Fuploads%2Fallimg%2F211111%2F1-211111133213262.jpg&refer=http%3A%2F%2Fwww.33cy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814204&t=639a699ab55079a1623c00583188566f',
          title:'深圳福田志愿者分队微服私访《美国至尊披萨》',
          active:'督察活动'
        },
        {
          src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.33cy.cn%2Fuploads%2Fallimg%2F211116%2F1-211116133426164.jpg&refer=http%3A%2F%2Fwww.33cy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814204&t=e471a8d8e199c72b3cfc3afc91e2408d',
          title:'深圳福田志愿者分队微服私访《美国至尊披萨》',
          active:'督察活动'
        },{
          src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdeal%2Feab528248c354ebdb90e6d352bb8fb3b121576.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814204&t=b1fa251e5c2389e67b478f3b4dd6a0bc',
          title:'深圳福田志愿者分队微服私访《美国至尊披萨》',
          active:'体察活动'
        },
      ]
    };
  },
  components:{
    Footer
  },
  methods:{
    // 添加
    tianjia() {
      this.$router.push({ path: "/create" }).catch((error) => error);
    },
  }
};
</script>

<style lang="less" scoped>
.followBox {
    overflow: hidden;
     .van_header_1 {
    width: 100%;
    height: 52.32px;
  }
  .van_header {
    width: 100%;
    height: 52.32px;
    display: flex;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 1;
    .van_jia {
      display: flex;
      justify-content: center;
      margin-left: 5px;
      .van-icon {
        font-size: 20px;
        color: silver;
        font-weight: bold;
      }
    }

    .van-col {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-row {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        .van-tabs {
          width: 100%;
          /deep/.van-tabs__line {
            background-color: rgba(67, 207, 124, 1);
          }
        }
      }
    }
  }
  .van-tabs__wrap {
    .van-tabs__nav {
      /deep/ .van-tabs__line {
        background-color: rgba(67, 207, 124, 1);
      }
    }
  }
  .van-search {
    margin: 0;
    //   border-radius: 5px;
    //   background: rgba(234, 235, 237, 1);
  }
  .main {
    .main_first {
      text-align: center;
      margin: 0 auto;
      position: relative;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
      .active {
        color: #fff;
        font-size: 14px;
        background: rgba(42, 131, 78);
        width: 100px;
        height: 27px;
        position: absolute;
        top: 12px;
        left: 0;
      }
      .word {
        height: 52px;
        width: 362px;
        p {
          margin: 0;
          padding: 0 14px;
          font-size: 18px;
          line-height: 48px;
          color: rgba(29, 29, 29, 1);
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      img {
        width: 100%;
        height: 186px;
      }
    }
  }
}
</style>